<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 2. 准备一个具有宽高的容器 -->
  <div id="main" style="width: 600px; height: 400px"></div>
  <div id="main1" style="width: 600px; height: 400px"></div>

  <!-- 1. 引入echarts.js -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 封装: 不是为了复用, 而是为了更好的维护

    function initBarChart() {
      // 3. 初始化一个echarts的实例对象
      // const myChart = echarts.init(dom容器)
      const myChart = echarts.init(document.querySelector('#main'))
      // 4. 准备配置项和图表的数据
      const option = {
        title: {   // 标题组件
          text: 'ECharts 入门示例1'  // 主标题
        },
        tooltip: {  // 提示框组件
          // show: false
        },
        legend: {  // 图例组件
          // data: ['销量']
        },
        xAxis: { // x轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量1',  // 系列名称，用于tooltip的显示，legend 的图例筛选
            type: 'line',   // 图表的类型 bar 柱状图 / pie 饼图 / line 折线图
            data: [5, 20, 46, 10, 10, 20]  // x轴的每一项数据
          },
          {
            name: '销量2',  // 系列名称，用于tooltip的显示，legend 的图例筛选
            type: 'line',   // 图表的类型 bar 柱状图 / pie 饼图 / line 折线图
            data: [10, 50, 26, 30, 50, 70]  // x轴的每一项数据
          }
        ]
      };

      // 5. 将配置项和实例对象建立关联
      // 实例对象.setOption(配置项)
      myChart.setOption(option)
    }
    // 柱状图
    initBarChart()

    // 折线图
    // 1. 定义一个函数
    function initLineChart() {
      // 3. 初始化一个echarts的实例对象
      // const myChart = echarts.init(dom容器)
      const myChart = echarts.init(document.querySelector('#main1'))
      // 4. 准备配置项和图表的数据
      const option = {
        color: ['red', 'green', 'blue', 'skyblue', 'hotpink'],  // 颜色列表
        title: {
          text: '折线图示例'
        },
        tooltip: {  // 提示框组件
          trigger: 'axis'  // 触发类型 axios 轴上显示 item 自身才显示
        },
        legend: { // 图例组件
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: { // 直角坐标系的网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: { // 工具箱
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category', // 离散的数据
          boundaryGap: false,
          data: ['周一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value' // 默认值 - 数值
        },
        series: [ // 系列数据
          {
            name: 'Email',
            type: 'line',
            stack: 'Total', // 数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };


      // 5. 将配置项和实例对象建立关联
      // 实例对象.setOption(配置项)
      myChart.setOption(option)
    }

    initLineChart()
  </script>
</body>

</html>